<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('项目团队统计') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('年份')" prop="year">
        <DatePicker
          v-model="queryParams.year"
          type="year"
          size="small"
          :placeholder="$t('年份')"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>

    <el-row v-loading="loading" :gutter="10">
      <el-col :span="10" style="height:400px;position: relative;">
        <Empty :data.sync="chartData.datas">
          <barLineChart v-if="chartData.datas.length > 0" ref="barChart" :chart-data="chartData" height="400px" />
        </Empty>
      </el-col>
      <el-col :span="14">
        <el-table :data="list" border>
          <el-table-column :label="$t('团队')" align="center" prop="deptName" show-overflow-tooltip />
          <el-table-column :label="$t('已投资项目数量')" align="center" prop="dealNums" />
          <el-table-column :label="$t('已投项目总金额') + $t('金额单位')" align="center" prop="investedTotalAmount">
            <template slot-scope="scope">
              <span>{{ moneyFormat(scope.row.investedTotalAmount, 'w') }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('已实现回款总金额') + $t('金额单位')" align="center" prop="exitTotalAmount">
            <template slot-scope="scope">
              <span>{{ moneyFormat(scope.row.exitTotalAmount, 'w') }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import barLineChart from '@/views/chart/barLineChart.vue'
import { dealTeamCount } from '@/api/base/deal/dealBase'
export default {
  components: {
    barLineChart
  },
  data() {
      return {
          list: [],
          chartData: {
            datas: []
          },
          loading: false,
          total: 0,
          queryParams: {
            year: this.parseTime(new Date(), '{y}'),
            pageNum: 1,
            pageSize: 10
          },
          form: {},
          rules: {
          }
      }
  },
  mounted() {
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      this.emptyShow = false
      dealTeamCount(this.queryParams).then(response => {
        this.list = response.rows
        this.total = response.total
        this.loading = false
        if (this.list.length > 0) {
          this.chartData.xLabel = this.list.map(v => v.deptName)
          this.chartData.legend = true
          this.chartData.yAxis2 = true
          this.chartData.yAxisName2 = ' '
          this.chartData.datas = [
            {
              name: this.$t('已投项目总金额(万)'),
              type: 'bar',
              data: this.list.map((ele) => { return ele.investedTotalAmount ? ele.investedTotalAmount / 10000 : 0 })
            },
            {
              name: this.$t('已实现回款总金额(万)'),
              type: 'bar',
              data: this.list.map((ele) => { return ele.exitTotalAmount ? ele.exitTotalAmount / 10000 : 0 })
            },
            {
              name: this.$t('已投资项目数量'),
              type: 'line',
              data: this.list.map((ele) => { return ele.dealNums })
            }
          ]
        } else {
          this.chartData = {
            datas: []
          }
        }
      })
    },
    // 表单重置
    reset() {
        this.form = {
            id: undefined
        }
        this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
        this.queryParams.pageNum = 1
        this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
        this.resetForm('queryForm')
        this.queryHandle()
    },
    exportHandle() {
      console.log()
    }
  }
}
</script>
<style scoped>
#echart{
  height: 300px;
}
</style>
